使用JavaScript源映射（.map文件）

本教程将介绍如何在JavaScript中使用源映射（.map文件）。

最近，我注意到一些JavaScript库（如Angular）随附了一个以.js.map为扩展名的文件，这引发了几个问题：

件下面是最终被大家认可的答案： 源映射（source maps）文件适用于已被压缩的JavaScript和CSS（现在也适用于TypeScript）文件。当你将一个文件进行压缩（例如angular.js文件），它会将数千行的易读代码变为只有几行的难以理解的代码。在将代码部署到生产环境时，最好使用压缩后的代码而不是完整的、未压缩的版本。在应用程序处于生产环境并出现错误时，源映射文件将帮助你查看原始版本的代码。如果没有源映射文件，任何错误信息看起来都会晦涩难懂。

对CSS文件也是一样的。一旦将Sass或Less文件编译为CSS，它看起来完全不同于原始形式。如果启用源映射，你就可以查看文件的原始状态，而不是修改后的状态。

因此，按照先后顺序回答你的问题：

希望这有所帮助。

只关注最后一个问题：如何创建源映射文件。下面是一些可以生成源映射的构建工具：

源映射文件（source map files）将混淆（压缩）后的文件映射为未混淆（未压缩）的文件。如果在未混淆文件中进行了更改，这些更改将自动应用到混淆后的文件中。

开发者可以按照以下步骤使用源映射文件：

不要在index.html文件中链接.js.map文件（没有必要）。

当使用好的混淆工具时，被混淆的.js文件会添加一条注释：

//# sourceMappingURL=yourFileName.min.js.map

该注释将连接你的.map文件。

在Chrome浏览器中，打开开发者工具，切换到"Sources"选项卡。你会看到"sources"文件夹，其中包含未混淆的应用程序文件。

希望这对你有帮助！